import { Select, Space, Table, Button, Input, Form, message, Modal } from 'antd';
import React, { useState, useEffect } from 'react';
import {
    useLocation,
    useNavigate
} from 'react-router-dom';
import { ExclamationCircleFilled } from "@ant-design/icons";
import {
    getTrend, editTrend, deleteTrend,searchTrend,addTrend
} from '../../../../../../utils/hsyHttp/hsyhttp.jsx'

const CollectionCreateForm = ({ open, onCreate, onCancel }) => {
    const [addForm] = Form.useForm();
    const openAdd = () => {
        onCancel();
        addForm.resetFields();
    };
    return (
        <Modal
            open={open}
            title="添加"
            okText="确定"
            cancelText="取消"
            onCancel={openAdd}
            onOk={() => {
                addForm
                    .validateFields()
                    .then((values) => {
                        addForm.resetFields();
                        onCreate(values);
                    })
                    .catch((info) => {
                    });
            }}
        >
            <Form
                form={addForm}
                name="form_in_modal"
                initialValues={{
                    isShow: "显示",
                }}
                colon={false}
            >
                <Form.Item
                    name="trends_title"
                    label="标题"
                    rules={[
                        {
                            required: true,
                            message: "请输入标题！",
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="trends_detail"
                    label="详情"
                >
                    <Input type="textarea" />
                </Form.Item>
                <Form.Item
                    name="trends_createuser"
                    label="创建人"
                    rules={[
                        {
                            required: true,
                            message: "请输入创建人！",
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
            </Form>
        </Modal>
    );
};
const CollectionCreateForm1 = ({
    editOpen,
    onCreate1,
    onCancel1,
    editInitial,
}) => {
    const [editForm] = Form.useForm();
    useEffect(() => {
        editForm.setFieldsValue(editInitial);
    }, [editInitial]);
    return (
        <Modal
            open={editOpen}
            title="编辑"
            okText="确定"
            cancelText="取消"
            onCancel={onCancel1}
            onOk={() => {
                editForm
                    .validateFields()
                    .then((values) => {
                        editForm.resetFields();
                        onCreate1(values);
                    })
                    .catch((info) => {
                    });
            }}
        >
            <Form
                form={editForm}
                name="form_in_modal"
                initialValues={{
                    isShow: "显示",
                }}
                colon={false}
            >
                <Form.Item
                    name="trends_title"
                    label="标题"
                    rules={[
                        {
                            required: true,
                            message: "请输入标题！",
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="trends_detail"
                    label="详情"
                >
                    <Input type="textarea" />
                </Form.Item>
            </Form>
        </Modal>
    );
};


const { confirm } = Modal;
const RealeStateDevelopments = () => {
    //表单
    const [form] = Form.useForm();
    const formRef = React.useRef(null);
    //分页
    const [total, setTotal] = useState(1)
    const success = (content) => {
        messageApi.open({
            type: "success",
            content,
        });
    };

    //数据
    const [data, setData] = useState([])
    useEffect(() => {
        getPersonData()
    }, [])
    //获取数据
    const getPersonData = () => {
        getTrend().then((res) => {
            let tableData = res.data
            setData(tableData)
            setTotal(tableData.length)
        })
    }
    //删除
    const showDel = (title, record) => {
        confirm({
            title,
            icon: <ExclamationCircleFilled />,
            content: "",
            okText: "确认",
            okType: "danger",
            cancelText: "取消",
            onOk() {
                deleteTrend({ trends_id: record.trends_id }).then((res) => {
                    getPersonData()
                    success(res.msg);
                });
            },
        });
    };
    //搜索
    const searchBtn = (params) => {
        if (params.trends_title == "") {
          params.trends_title = "";
        }
        if (params.trends_createuser == "") {
          params.trends_createuser = "";
        }
        searchTrend(params).then(res => {
            let tableData = res.data
            setData(tableData)
            setTotal(tableData.length)
            message.success(res.msg)
        })
      };
    //添加
    const [open, setOpen] = useState(false);

    const onCreate = (values) => {
        addTrend({
            trends_title: values.trends_title,
            trends_detail: values.trends_detail,
            trends_createuser: values.trends_createuser
        })
            .then((res) => {
                if (res.code == 200) {
                    success();
                    setOpen(false);
                    getPersonData();
                }
            })
            .catch((err) => { });
    };

    //编辑
    const [messageApi, contextHolder] = message.useMessage();
    const [editInitial, setEditInitial] = useState({});
    const [editOpen, setEditOpen] = useState(false);
    const [editId, setEditId] = useState();
    const editFrom = (record) => {
        let initialData = {
            trends_id: record.trends_id,
            trends_title: record.trends_title,
            trends_detail: record.trends_detail
        };
        setEditInitial(initialData);
        setEditId(record.trends_id);
        setEditOpen(true);
    };
    // 确认编辑
    const onCreate1 = (values) => {
        // setEditOpen(false);
        editTrend({
            trends_id: editId,
            trends_title: values.trends_title,
            trends_detail: values.trends_detail
        })
            .then((res) => {
                if (res.code == 200) {
                    messageApi.open({
                        type: "success",
                        content: "修改成功！",
                    });
                    setEditOpen(false);
                    getPersonData();
                }
            })
            .catch((err) => { });
    };
    // const [open, setOpen] = useState(false);
    const columns = [
        {
            title: '编号',
            dataIndex: 'trends_id',
            key: 'trends_id',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '标题',
            dataIndex: 'trends_title',
            key: 'trends_title',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '创建人',
            dataIndex: 'trends_createuser',
            key: 'trends_createuser',
        },
        {
            title: '创建时间',
            dataIndex: 'trends_createDate',
            key: 'trends_createDate',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button type={"default"} onClick={() => {
                        editFrom(record);
                    }}> 编辑</Button>
                    <Button type={"dashed"} onClick={() => {
                        showDel("你确定删除吗?", record);
                    }}>删除</Button>
                </Space>
            ),
        },
    ];

    return (
       <div>
        <div>
            <CollectionCreateForm
          open={open}
          onCreate={onCreate}
          // onCancel
          onCancel={() => {
            setOpen(false);
          }}
        />
         </div>
         <div>
 <CollectionCreateForm1
                editOpen={editOpen}
                onCreate1={onCreate1}
                onCancel1={() => {
                    setEditOpen(false);
                }}
                editInitial={editInitial}
            />
         </div>
           
            <Form
             name="horizontal_login"
             layout="inline"
            onFinish={searchBtn}
            >

                <Form.Item label="关键词" name="trends_title">
                <Input style={{width:100}}/>
                </Form.Item>
                <Form.Item label="创建人" name="trends_createuser">
                <Input style={{width:100}}/>
                </Form.Item>
                <Form.Item>
                <Button type="primary" htmlType="submit">
                搜索
              </Button>
                <Button
          type="primary"
          onClick={() => {
            setOpen(true);
          }}
        >
          + 添加
        </Button>
                </Form.Item>
            </Form>

            <Table className={"table"} columns={columns} dataSource={data} rowKey={(record) => record.key} />
       </div>
    )
}

export default RealeStateDevelopments